<template>
  <section class="sms-mes-tel">
    
    <div
      class="view-statue"
      v-show="!editorStatue"
      :style="{'justify-content': sourceData.usageSmsContent && sourceData.approveSmsContent ? 'flex-start' : 'center'}"
    >
      <el-button 
        v-if="!readonly || sourceData.usageSmsContent"
        class="editor-btn"
        type="primary" 
        @click="editorHandle(true)"
      >编辑
      </el-button>

      <div
        class="content-left"
        v-if="sourceData.usageSmsContent"
      >
        <span class="tag" :style="{background: '#29B6F6'}">使用中</span>
        <SmsView :sms-content="sourceData.usageSmsContent" />
      </div>
      <div class="content-left" v-else><SmsView sms-content="" @handleAddTemplate="editorHandle"/></div>
      <div
        class="content-right"
        v-if="sourceData.approveSmsContent"
      >
        <span class="tag" :style="{background: '#FFA726'}">审批中</span>
        <SmsView :sms-content="sourceData.approveSmsContent" />
      </div>
    </div>

    <div v-show="editorStatue">
      <span class="tag sms-edit">编辑内容</span>
      <SmsForm
        ref="smsFormRef"
        v-model="editorStatue"
        :moduleType="moduleType"
        :sms-template="sourceData"
        :channel="channel"
        :send-channel-list="sendChannelList"
        :modules="modules"
        :type="type"
        :taskExtendData="taskExtendData"
        :messageTriggerType="messageTriggerType"
        @update="update"
      />
    </div>

  </section>
</template>

<script>
// 短信消息预览组件
import SmsView from './sms/SmsView.vue'
// 短信消息表单配置
import SmsForm from './sms/SmsForm.vue'
export default {
  // 短信消息模版
  name:'sms-mes-tel',

  data(){
    return{
      // 是否是编辑状态
      editorStatue:false,
    }
  },
  props:{
    // 接口获取到短信消息模版数据
    sourceData:{
      type:Object,
      required:true,
      default:() => {
        return {}
      }
    },
    // 当前渠道的channel值
    channel:{
      type:[String,Number],
      required:true
    },
    // 消息模块的来源/ 客服/ 工单/ 智能报告
    moduleType: {
      type: String,
      default: '',
    },

    // 当前选中的渠道
    sendChannelList:{
      type:Array,
      required:true
    },

    readonly: {
      type: Boolean,
      default: false
    },
    modules: {
      type: Array,
      default: () => []
    },
    // 是否校验模版内容变化 默认要校验 触发器不校验
    isValidateChange: {
      type: Boolean,
      default: true
    },
    // 消息类型 inside：内部，customer：客户
    type: {
      type:String,
      required:true
    },
    // 当前的触发对象
    messageTriggerType: {
      type: String,
      default: '',
    },

    // 当前的触发对象的表单字段
    taskExtendData: {
      type: Array,
      default: (() => []),
    }
  },

  components:{
    SmsView,
    SmsForm
  },

  methods:{
    // 短信模板提交审核
    async update(form){
      // console.log('update', form)
      if (!form.applyContent) return this.$message.warning('模板内容不能为空');
      if ((form.notice && form.notice.indexOf('含回访') != -1) && form.applyContent.indexOf('{smsUrl}') == -1) {
        return this.$message.warning('回访模版必须包含链接地址 {smsUrl} 字段');
      }
      const params = form;
      params.type = '0';
      this.$http.get('/vipsms/applyTemplate', params).then(res=>{
        if (res.succ) {
          this.$platform.notification({
            type: 'success',
            title: '成功',
            message: '保存成功'
          });
          this.$emit('update', 'smsMsg')
        } else {
          this.$platform.notification({
            type: 'error',
            title: '失败',
            message: res.message
          });
        }
      });
    },
    editorHandle(flag = true){
      this.editorStatue = flag;
    },

    // 供父组件调用，提交校验，当校验失败resolve里面传入失败原因
    validate(){
      const contentValidate = this.$refs.smsFormRef?.getApplyText() || true
      return Promise.resolve(contentValidate)
      // return Promise.resolve('系统消息模块校验失败')
    },

    // 供父组件调用，是否有修改模版
    isChange(){
      const smsFormRef = this.$refs.smsFormRef
      // 获取子组件的短信内容
      const applyContent = smsFormRef.form?.applyContent
      const { usageSmsContent, approveSmsContent } = this.sourceData
      const initSmsContent =  approveSmsContent || usageSmsContent
      return applyContent !==  initSmsContent
    },

    // 父组件调用，更新接口需要的字段
    getParam(){
      const smsFormRef = this.$refs.smsFormRef || {}

      // 获取子组件的短信内容
      const applyContent = smsFormRef.form?.applyContent
      const { id, name, notice } = this.sourceData
      // 当短信没有修改，返回smsTemplateVO:null,接口需要，接口通过该字段为null不更新该模块
      if(!this.isChange() && this.isValidateChange) return {smsTemplateParam:null}

      // 有更改，需要将所有数据传递过去
      return {
        smsTemplateParam:{
          id,
          applyContent,
          name,
          notice
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sms-mes-tel{
    padding:12px 16px;
    position:relative;
    .view-statue{
        display: flex;
        .editor-btn{
            position:absolute;
            right:16px;
            top:16px;
        }
        .content-left,.content-right{
            margin-top:20px;

        }
        .content-right{
            margin-left:24px;
        }
    }
    .tag{
        padding:3px 8px;
        border-radius: 11px;
        font-size: 12px;
        color:#fff;
    }
    .sms-edit {
      position: absolute;
      top: 8px;
      font-size: 14px;
      color: #262626;
    }
}
</style>
